<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="keywords" content="shuangbiao,秦双彪,双彪" />
        <meta name="description" content="一汽租赁-红旗车型试算工具。" />
        <title>一租试算工具 | 彪哥的道场</title>
        <link rel="stylesheet" href="../res/css/normalize.css">
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
        <style>
            @media screen and (max-width: 768px) {
                .concent { font-size: 1.5em; }
                .slogon { font-size: 0.8em; }
            }
            h1{font-size:larger; text-align:center; font-weight: 600;}
            button {
                display: inline-block;
                font-weight: 400;
                color: #fff;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-color: #007bff;
                border: 1px solid #007bff;
                padding: .375rem .75rem;
                font-size: 1rem;
                line-height: 1.5;
                border-radius: .25rem;
                transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            }

            button:hover{ color: #fff; background-color: #0069d9; border-color: #0062cc;}
            input[class="form-control"] { height: 1.5em; }

            #container { width: 100%; max-width: 300px; margin: auto; padding: auto;}
            .form-control  {
                display: block;
                flex: 1 1 0%;
                width: 100%;
                height: calc(1.5em + .75rem + 2px);
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                color: #495057;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                border-radius: .25rem;
                transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            }
            .input-group{
                position: relative;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -ms-flex-align: stretch;
                align-items: stretch;
                width: 100%;
                margin-bottom: 1em;
            }
            .f-span {
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                padding: .375rem .75rem;
                margin-right: -1px;
                margin-bottom: 0;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                color: #495057;
                text-align: center;
                white-space: nowrap;
                background-color: #e9ecef;
                border: 1px solid #ced4da;
                border-radius: .25rem;
            }

            .bd-callout {
                padding: .75rem;
                margin-top: 1.25rem;
                margin-bottom: 1.25rem;
                border: 1px solid #eee;
                border-left-width: .25rem;
                border-radius: .25rem;
                border-left-color: #5bc0de;
            }

            #reset {color: #212529; background-color: #ffc107; border-color: #ffc107;}
            #reset:hover {color: #212529; background-color: #e0a800; border-color: #d39e00;}
            .input-group>:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0;}
            .input-group>:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0;}
        </style>
        <script src="../res/js/decimal.js"></script>
    </head>
    <body>
        <div id="container">
            <h1>一汽租赁-红旗车型试算工具</h1>
            <div class="input-group">
                <span class="f-span">车型</span>
                <select id="model" class="form-control">
                    <option value="7800">红旗H5 1.5T</option>
                    <option value="5930" selected>红旗H5 2.0T</option>
                    <option value="8200">红旗H6</option>
                    <option value="14000">红旗H9</option>
                    <option value="5200">红旗HS3</option>
                    <option value="6400">红旗HS5</option>
                    <option value="12200">红旗HS7</option>
                    <option value="5000">红旗HQ9</option>
                    <option value="5400">红旗E-QM5 560KM</option>
                </select>
            </div>

            <div class="input-group">
                <span class="f-span">金额</span>
                <input id="cost" type="number" value="100000" class="form-control"/>
            </div>

            <div class="input-group">
                <span class="f-span">期数</span>
                <select id="period" class="form-control">
                    <option value="24">24期</option>
                    <option value="36">36期</option>
                    <option value="48">48期</option>
                    <option value="60" selected>60期</option>
                    <option value="66">66期</option>
                </select>
            </div>

            <div class="input-group">
                <button onclick="cacl()">计算</button>
                <button id="reset" onclick="reset()">重置</button>
            </div>

            <div class="bd-callout">
                <p>月还：￥<span id="monthPay">0</span></p>
                <p>总息：￥<span id="totalPay">0</span></p>
            </div>

        </div>
    
    </body>

    <script>
        let dom_model = document.getElementById('model');
        let dom_cost = document.getElementById('cost');
        let dom_period = document.getElementById('period');
        let rates = {
            "fuel" : {
                "24" : 0.00683333,
                "36" : 0.0071,
                "48" : 0.007625,
                "60" : 0.007625,
                "66" : 0.007625
            },
            "eqm5" : {
                "24" : 0.0061500,
                "36" : 0.0063917,
                "48" : 0.007625,
                "60" : 0.007625,
                "66" : 0.007625
            }
        }

        function MPay(rate, period, cost, discount){
            let monthPay, totalPay, totalInterest;
            let max_dct = maxDct(rate, period, cost);

            if (discount > max_dct) {
                monthPay = Decimal.div(cost, period);
                totalPay = cost;
                totalInterest = 0;
            } else {
                monthPay = PMT(rate, period, Decimal.sub(cost,discount));
                totalPay = Decimal.mul(monthPay, period);
                totalInterest = Decimal.sub(totalPay, cost);
            }

            let result = { monthPay, totalPay, totalInterest };

            return result;
        }

        function PMT(rate, nper, cost){
            //pmt = rate * cost * Math.pow(1 + rate, nper) / (Math.pow(1 + rate, nper) - 1) ;
            let pmt = new Decimal(rate).mul(cost).mul( Decimal.pow( Decimal.add(1, rate), nper) )
                            .div( Decimal.sub( Decimal.pow( Decimal.add(1, rate), nper), 1));
            return pmt.toNumber();
        }

        function PV(rate, nper, pmt) {
            //let pv = pmt *  (1 - 1 / Math.pow(1 + rate, nper)) / rate;            
            let pv = new Decimal(pmt).mul(Decimal.sub(1, Decimal.div(1, Decimal.pow( Decimal.add(1, rate), nper )))).div(rate);
        
            return pv.toNumber();
        }

        function maxDct(rate, nper, cost){
            let mp = PMT(rate, nper, cost);
            let mc = Decimal.div(cost, nper);
            let mi = Decimal.sub(mp, mc);
            let discount = PV(rate, nper, mi);
            
            return discount;
        }

        function getRate(per) {
            if (dom_model.selectedIndex == 8) 
                return rates['eqm5'][per];

            return rates['fuel'][per];;
        }

        function cacl() {
            let discount = parseFloat(dom_model.value); 
            let cost = parseFloat(dom_cost.value);
            let period = parseFloat(dom_period.value);

            if (dom_model.selectedIndex == 4 && (dom_period.selectedIndex == 3 || dom_period.selectedIndex == 4) ) 
                discount = 3000; // HS3 贴息 60期3000

            let res = MPay(getRate(period), period, cost, discount);

            document.getElementById('monthPay').innerText = res.monthPay.toFixed(2);
            document.getElementById('totalPay').innerText = res.totalInterest.toFixed(2);
        }

        function reset(){
            dom_cost.value = 100000;
            dom_model.selectedIndex = 1;
            dom_period.selectedIndex = 3;
        }

    </script>
</html>